<template>
	<div id="imgViewApp">
		<div class="tool-bar" style="--wails-draggable: drag">
			<div class="title">
				<img :src="iconUrl" style="width: 16px; height: 16px" />
				{{ name }}
			</div>
			<div class="tool-btn">
				<div style="cursor: pointer" @click="openFile">
					<Icon type="md-albums" />
				</div>
				<div style="cursor: pointer" @click="autoPlay">
					<Icon type="md-arrow-dropright-circle" v-if="!isPlayIng" />
					<Icon type="ios-exit" v-if="isPlayIng" />
				</div>
				<div style="cursor: pointer" @click="fullScreen">
					<Icon type="md-expand" />
				</div>
				<div style="cursor: pointer" @click="closeApp">
					<Icon type="md-power" />
				</div>
			</div>
		</div>
		<div class="imageViwer">
			<Image style="height: 100%" :src="curShow.url" fit="contain" />
		</div>
		<div class="img-list">
			<div class="arror arr-left" @click="left">
				<Icon type="ios-arrow-back" />
			</div>
			<div class="img-list-warp" ref="listViewRef">
				<div v-for="(item, index) in imgList" :key="index" @click="setCurImg(item)">
					<Image :src="item.url" fit="contain" width="60px" height="80px" />
				</div>
			</div>
			<div class="arror arr-right" @click="right">
				<Icon type="ios-arrow-forward" />
			</div>
		</div>
		<footer>Made by Bogerj</footer>
	</div>
</template>

<script>
	import { WindowSetSize, WindowToggleMaximise,OnFileDrop } from "../../wailsjs/runtime/runtime";
	import { CloseApp, OpenFileDlg } from "../../wailsjs/go/main/App";
	import iconUrl from "../assets/images/logo-universal.png";
	export default {
		name: "imgView",
		data() {
			return {
				name: "图片预览",
				imgList: [],
				curShow: {},
				iconUrl: iconUrl,
				winsSize: {
					w: 800,
					h: 630,
				},
				curStart: 0,
				autoPlayIndex: 0,
				timer: null,
				isPlayIng: false,
				dataSource: [],
				urlList: [],
			};
		},
		mounted() {
			WindowSetSize(this.winsSize.w, this.winsSize.h);
			OnFileDrop((x,y,paths)=>{
				paths.forEach((ele) => {
					let imgFile = ele.replace(":", "");
					imgFile = "/" + imgFile.split("\\").join("/");
					this.urlList.push(imgFile);
				});
				this.getImageList();
				console.log(this.urlList)
			},false)
		},
		methods: {
			getImageList() {
				this.imgList=[];
				for (let i = 0; i < this.urlList.length; i++) {
					this.imgList.push({ url: this.urlList[i], name: i + "", id: i });
				}
				this.curShow = this.imgList.length > 0 ? this.imgList[0] : {};
			},
			fullScreen() {
				WindowToggleMaximise();
			},
			setCurImg(curImg) {
				this.curShow = curImg;
			},
			closeApp() {
				CloseApp();
			},
			right() {
				console.log("right", this.curStart);
				this.curStart += 1;
			},
			autoPlay() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
					this.isPlayIng = false;
				} else {
					this.isPlayIng = true;
					this.timer = setInterval(() => {
						if (this.autoPlayIndex >= this.imgList.length) {
							this.autoPlayIndex = 0;
						}
						this.curShow = this.imgList[this.autoPlayIndex];
						this.autoPlayIndex++;
					}, 1000);
				}
			},
			left() {
				console.log("left");
				this.curStart -= 1;
			},
			openFile() {
				OpenFileDlg().then((res) => {
					res.forEach((ele) => {
						let imgFile = ele.replace(":", "");
						imgFile = "/" + imgFile.split("\\").join("/");
						this.urlList.push(imgFile);
						console.log(imgFile);
					});
					this.getImageList();
				});
			},
		},
	};
</script>
<style>
	#imgViewApp {
		height: 100%;
		width: 100%;
		background: none;
	}
	.imageViwer {
		padding-top: 5px;
		height: calc(100vh - 155px);
		text-align: center;
	}
	.img-list {
		width: 100%;
		box-sizing: border-box;
		height: 100px;
		display: flex;
	}
	.arror {
		font-size: 30px;
		padding-top: 15px;
		height: 100px;
		transition: all 0.1s linear;
	}
	.arr-left:hover {
		color: #fff;
	}
	.arr-right:hover {
		color: #fff;
	}
	.img-list-warp {
		flex: 1;
		display: flex;
		padding: 5px;
		gap: 8px;
		overflow-x: scroll;
		overflow-y: hidden;
	}
	.img-list-warp::-webkit-scrollbar {
		height: 10px;
	}
	.img-list-warp::-webkit-scrollbar-thumb {
		border-radius: 8px;
		background-color: #d55959;
	}
	img-list-warp::-webkit-scrollbar-track {
		border-radius: 8px;
		background-color: #e7e7e7;
		border: 1px solid #cacaca;
	}

	.tool-bar {
		font-size: 12px;
		color: #000;
		font-weight: 500;
		padding: 0px 9px;
		display: flex;
		background: #fff;
		justify-content: space-between;
		align-items: center;
		height: 30px;
	}
	.tool-btn {
		display: flex;
	}
	.tool-btn div {
		margin-left: 5px;
		font-size: 18px;
	}
	.title {
		display: flex;
		justify-content: space-between;
		justify-items: center;
	}
</style>
